Uvod

U prošlosti, za pronalazak željene informacije bilo je potrebno uložiti velik trud jer je postojalo mnoštvo izvora informacija koje nisu uvijek bile okupljene na jednome mjestu. Taj je problem olakšala pojava internetskih stranica, češće rečeno, web stranica. Cilj ovog dokumenta nije prikazati kako se koristiti web stranicama, već je glavni zadatak upoznati čitatelja s kreiranjem i izradom istih.

Sve internetske stranice koje otvaramo u svojim preglednicima pisane su opisnim jezikom za opis strukture i sadržaja internet dokumenta, a naziv mu je HyperText Markup Language, poznatiji pod akronimom HTML. Sadržaj određene web stranice je potrebno i stilizirati, a za to se koristi stilski jezik CSS, Cascading Style Sheet-a. Kako bismo bili uspješni u kreiranju internetskih stranica, neophodno je na samom početku svladati osnove ovih dvaju navedenih i najraširenijih računalnih jezika.

Kreiranje vlastite web stranice može se činiti vrlo kompliciranim, no shvaćanjem samog oblika takvih stranica, uočljivo je kako su one, ništa drugo, već tekstualni dokument za čije kreiranje nisu potrebni teško razumljivi programski jezici.Ove su upute namijenjene početnicima i ne podrazumijevanju nikakvo predznanje iz područja programiranja.

Primjer HTML-a i CSS-a u editoru:

Slika 1. - Primjeri HTML-a i CSS-a u editoru

Izgled prethodnog koda u web pregledniku:

Slika 2. - Prikaz koda u internet pregledniku

Kako razlikujemo HTML i CSS ?

Za početak je vrlo važno uočiti razlike između ova dva jezika.

Kao što je rečeno u uvodu, HTML je opisni jezik koji strukturira sadržaj web stranice i daje mu značenje. Dokument kodiran u HTML jeziku sastoji se od običnog teksta i HTML elemenata koji opisuju web stranicu.
Kada kažemo da je HTML opisni jezik, pod tim podrazumijevamo njegov zadatak opisivanja određenih dijelova teksta. Uzmimo za primjer jedan od osnovnih HTML elemenata <head> i <p>.

<head> Ovaj tekst predstavlja zaglavlje </head>

<p> Ovaj tekst predstavlja paragraf </p>

S druge strane, CSS sintaksa služi za određivanje izgleda elemenata unutar internet dokumenta i definiranje stila stranice, odnosno, njezinog izgleda u preglednicima. Njega koristimo kako bismo našu stranicu učinili ljepšom i lakšom za korištenje našim posjetiteljima. U pravilu, jezici su samostalni i neovisni jedan o drugom. CSS ne bi trebao biti napisan unutar HTML dokumenta, kao ni HTML unutar CSS-a. Stoga možemo reći kako će HTML uvijek predstavljati sadržaj, a CSS će biti odgovoran za pojavu tog istog sadržaja

Kako je nastao HTML ?

Kako bismo postali uspješni web dizajneri i dobro razumjeli HTML kao i mogućnosti koje nam pruža, potrebno se barem ukratko upoznati s razlozima i okolnostima njegova nastanka.

Prvo, HTML se razvijao usporedno s razvojem interneta. Njegovim ocem smatra se Tim Berners-Lee, poznati fizičar iz CERN-a u Švicarskoj (Conseil Européen pour la Recherche Nucléaire). Naime, u CERN-u je u kasnim osamdesetima postojao problem prilikom organizacije elektroničkih dokumenata. Karakterističnost tih dokumenata je ta da se jedan pozivao na drugi. Upravo je Berners-Lee prepoznao potrebu efikasnog organiziranja i rješavanja nastalog problema: kodiraj i poveži. S tada postojećom metodom za kodiranje strukture elektroničkih dokumenata, Standard Generalized Markup Language (SGML), bilo je prekompleksno rješavanje Berners-Leeova problema.

Slika 3. - Tim Berners Lee - "Otac" HTML-a

Njegov je cilj bio osmisliti sustav koji će omogućiti jednostavno kodiranje i povezivanje dokumenata na način da budu lako dostupni preko mreže. Iz tog razloga razvio je HTML, koji nam danas služi za kodiranje dokumenata, i HyperText Transport Protocol (HTTP), za prijenos tih dokumenata. Cijeli je sustav pokrenut 1991. godine. HyperText se sastoji od međusobno povezanih dijelova objekata tako da posjetitelj interaktivno određuje redoslijed čitanja. To znači da on omogućava posjetitelju ''šetanje'' kroz dokument. Markup Language označava način unosa izgleda informacija unutar dokumenta.

Slika 4. - Izgled SGML-a

Kako koristimo HTML ?

Prije nego što počnemo graditi web stranice potrebno je naučiti kako se koriste HTML elementi.

Za HTML možemo reći kako je on materinji jezik preglednika. Pomoću njega na web stranicama prikazujemo tekst, tablice, formulare, sliku, glazbu ili video. Bitno je napomenuti kako u HTML dokumentu ne postoje razlike između velikih i malih slova, ali se preporuča korištenje malih

Slika 5. - Primjer kako se NE koristi HTML

Slika 6. - Primjer pravilnog korištenja HTML-a

Elementi HTML-a

Svaki element sastoji se od tri dijela, od početne oznake, sadržaja koji želimo implementirati i završne oznake.

Osim standardnih HTML elemenata, postoje i samozatvarajući HTML elementi. Kod takvih elemenata nema završne oznake.

<img src=slika.jpg" alt="primjer" />

Također razlikujemo i prazne elemente. Oni nemaju nikakav sadržaj unutar elementa. Potrebno je staviti znak ''/'' na kraju kako bi element bio pravilno zatvoren.

<br />

Atributi HTML-a

Atributi HTML elemenata su svojstva koja pružaju dodatne informacije. Oni se obavezno nalaze u početnoj oznaci elementa, nikada u završnoj. Atribut se sastoji od naziva i vrijednosti svojstva.

Naziv se piše malim slovima i nakon njega slijedi znak jednakosti (=) i vrijednost svojstva koja se navodi unutar dvostrukih navodnih znakova.

Jedan element može sadržavati više svojstava koji se međusobno odvajaju razmakom. Redoslijed kojim navodimo svojstva nije bitan.

<img src= "slika.jpg" alt ="primjer slike" />

Kodiranje u HTML-u

Ostavimo sada teoriju u drugome planu, osvrnimo se na praktični dio. Za lakše praćenje uputa, potrebno je na računalu instalirati bilo koji tekstualni editor. Ove upute izrađene su prema radu u programu Notepad++ (https://notepad-plus-plus.org/).

Danas na webu postoji veći broj različitih HTML dokumenata, zbog čega preglednici ne prikazuju stranicu uvijek kako ju je stvaratelj zamislio, pa je na samom početku potrebno napisati deklaraciju kako bi web preglednik znao koja se inačica koristi u dokumentu. Najčešća deklaracija s kojom se u novije vrijeme susrećemo je <!DOCTYPE html> koja upućuje na korištenje HTML5 inačice.

Također, kod svakog HTML dokumenta moramo imati najmanje jedan element najvišeg nivoa. To je oznaka <html>. Sve što radimo, napišemo, u dokumentu nalazit će se unutar početne i završne oznake tog elementa.

U HTML dokumentu uvijek imamo dva dijela, zaglavlje i tijelo dokumenta. Započet ćemo sa zaglavljem dokumenta. Zaglavlje označavamo oznakom <head>. Unutar te oznake smještamo informacije poput naslova, meta podataka i slično.

Elementi koji mogu biti dodani u <head> su:

<title> naslov dokumenta koji je vidljiv u naslovnoj liniji preglednika,

<base> bazni URL za linkove ili datoteke u web stranici,

<link> učitava datoteke različitih vrsta, najčešće je to CSS datoteka,

<meta> dostavlja dodatne informacije o stranici, npr. koji raspored znakova se koristi na web stranici, opis web stranice, ključnih riječi,..

<script> povezuje se s vanjskom datotekom skripte ili u sebi sadrži skriptu.

Sve ono što se nalazi u zaglavlju neće se prikazati u prozoru preglednika.

Za potrebe ovog primjera, u editor ćemo, unutar zaglavlja, napisati samo title oznaku.

<!DOCTYPE HTML >
<html>
<head>
<title> Ovo je moja prva web stranica </title>
</head>
</html>

Slika 7. - Izgled HTML koda u editoru

Sljedeći je korak dodavanje tzv. ''tijela'' web stranice korištenjem oznake <body>. Nju dodajemo ispod zatvorene oznake zaglavlja. Nakon što dodamo <body> našoj stranici dobit ćemo osnovnu strukturu svake web stranice. Za razliku od zaglavlja, sadržaj dodan unutar <body> oznake bit će vidljiv u našim preglednicima.

Ukoliko želimo dodati naslov vidljiv u našim preglednicima koristit ćemo jednu od heading oznaka. Te oznake dolaze u 6 veličina, od kojih h1 označava najveću, a h6 najmanju veličinu. Nakon unesenih oznaka, naš bi kod trebao izgledati kao na Slici 8.

<!DOCTYPE HTML >
<html>
<head>
<title> Ovo je moja prva web stranica </title>
</head>
<body>

<h1> Ovo je naslov moje prve WEB stranice! </h1>

</html>

Slika 8. - Izgled cjelokupnog HTML koda

Zbog bolje preglednosti, savjetuje se da se svaki novi element uvuče tabom kako bi se vizualno istaknuo, ali i kako bismo jasno vidjeli strukturu dokumenta. Uvlačenje elemenata nema nikakvog učinka na sam prikaz stranice u pregledniku, ali olakšava drugima i nama samima čitanje napisanoga koda.

Nakon što smo unijeli promjene u naš HTML dokument, sadržaj je potrebno spremiti. Tipkama Ctrl+S (ili odabirom gumba „Save“) otvoriti će se prozorčić koji će nas pitati kako želimo spremiti naš dokument. Važno je da na kraju naziva stavimo nastavak .html i spremimo u obliku All types.

Slika 9. - Izgled prozora za spremanje dokumenta

Želimo li pregledati kako naša stranica sada izgleda u pregledniku to ćemo učiniti jednostavno dvostrukim klikom na naš HTML dokument.

Slika 10. - Izgled naše stranice u internet pregledniku

Napravili smo prvi korak u stvaranju naše web stranice. Sada ćemo oko našeg naslova dodati odjeljak pomoću oznake <div>, a unutar <div> oznake dodat ćemo naslove i dva paragrafa. Svaku novu promjenu potrebno je pohraniti.

<!DOCTYPE HTML >
<html>
<head>
<title> Ovo je moja prva web stranica </title>
</head>
<body>
<div>
<h1> Ovo je moja prva web stranica </h1>
<p> Ovo je prvi paragraf </p>
<h3> Ovo je drugi naslov </h3>
<p> Ovo je drugi paragraf </p>
</div>
</body>
</html>

Slika 11. - HTML kod obogaćen DIV tagovima

Nakon što smo dodali nove oznake naša stranica bi trebala izgledati kao na Slici 12.

Slika 12. - Izgled stranice nakon dopuna

Sada kada znamo način na koji radi HTML pokazat ćemo nešto malo složenije. Naučit ćemo kako na stranicu dodati komentar, sliku i poveznicu.

Ukoliko želimo unutar našeg koda ostaviti neki tekst koji se neće prikazati na stranici koristimo opciju komentar. Komentar dodajemo u ovom obliku <!--komentar--> . Dakle, sve što se nalazi između ova dva znaka <!-- --> preglednik će ignorirati.

Za dodavanje slike koristimo tzv. samozatvarajuću oznaku img s atributima src i alt. Unutar atributa src (source) upisujemo izvor naše slike. Može biti poveznica na online sliku ili putanja do slike na našem računalu. Na primjer, ako se slika nalazi u istoj mapi gdje je i HTML datoteka, napisat ćemo <img src=“ime slike.jpg“ />. Nije nužno da slika ima nastavak .jpg. To ovisi o tipu slike koju želimo ubaciti na našu stranicu. Uobičajeno su slike u .gif, .jpg ili .png formatu. Noviji web čitači prepoznaju i vektorski format grafike, .svg. Naziv slike dodajemo unutar atributa alt.

HTML kod za dodavanje slike trebao bi izgledati ovako:

<img src="ime_slike.jpg" alt="prva_slika" />

Poveznice dodajemo na način da otvaramo oznaku <a> koji sadrži atribut href unutar kojeg upisujemo putanju do web lokacije na koju želimo da naš link vodi. Ova oznaka ima i završnu oznaku, dakle, potrebno ju je zatvoriti, kao što se može vidjeti na Slici 13.

<!DOCTYPE HTML >
<html>
<head>
<title> Ovo je moja prva web stranica </title>
</head>
<body>
<div>
<h1> Ovo je moja prva web stranica </h1>
<p> Ovo je prvi paragraf </p>
<h3> Ovo je drugi naslov </h3>
<p> Ovo je drugi paragraf </p>
</div>
<div>
<!-- Unutar ovog odjeljka ćemo dodati sliku i poveznicu -->
<img src="dog.jpg" alt="prva-slika" height= />
<a href= "http://www.w3schools.com/"> Nauči HTML i CSS! </a>

</div>
</body>
</html>

Slika 13. - HTML kod sa dodanim elementima komentara i fotografije

Slika 14. - Izgled stranice prema kodu na Slici 13.

Kao što već znamo, HTML5 je najnovija inačica HTML-a. Uvođenjem novih semantičkih elemenata HTML je omogućio svojim korisnicima jednostavniju uporabu elemenata.

Kada kažemo da su neki elementi semantički mislimo na one elemente koji jasno definiraju značenje sadržaja korisniku i pregledniku. Primjerice, nesemantički su elementi <div> ili <span> iz razloga što oni ne govore ništa o svom sadržaju. S druge strane, elementi poput <table>, <p>, <form> ili <article> jasno nam opisuju sadržaj unutar njih.

Neki od najkorištenijih HTML5 elemenata su sljedeći:

<header> je prvi element na našoj stranici i unutar njega obično smještamo logo i navigaciju. Sam header ne može u sebi imati drugi header niti footer.

<nav> element služi nam za dodavanje navigacije na stranici. Možemo ga smjestiti bilo gdje na stranicu, a radi lakšeg određivanja možemo mu dodijeliti ID ili klasu.

<section> element služi nam za tematsko grupiranje sadržaja na stranici. On može sadržavati naslove, prisjetimo se h1-h6, element article, paragrafe i slično. Ukoliko element želimo korisititi radi stiliziranja, preporučuje se koristiti <div>.

<figure> i <figcaption> koristimo kod stavljanja fotografija na stranice. Figcaption odnosi se na tekst ispod slika.

<footer> je samostalni element koji se koristi za dodavanje kontakt informacija,copyright znaka... Može se nalaziti bilo gdje na stranici, čak i u section tagu kao njegov footer.

Cijeli popis dostupan je na http://www.w3schools.com/html/html5_new_elements.asp

Relativna i apsolutna adresa

Dokumente je moguće organizirati u mape i podmape, što je vrlo važno shvatiti zbog povezivanja više dokumenata.

Prikaz 1. - Organizacija dokumenata u mape i podmape

Glavna mapa označena je kao "/" i sadrži mape IMG, CSS, HTML i dokument index.html Unutar mape "IMG", nalaze se dokumenti picture.png, image.jpg i podmapa ''logo'' s dokumentom fb.png. Unutar mape "CSS" nalazi se dokument style.css, dok se unutar mape ''HTML'' nalazi dokument contact.html.

Povezivanje se vrši na način da se HTML dokumenti povezuju sa svim ostalim resursima (slike, stilovi i slično). Veza se može uspostaviti navođenjem relativne ili apsolutne adrese do dokumenta. Apsolutnu adresu navodimo od osnovne mape HTML-a pa do konkretnog dokumenta s kojim povezujemo, dok se relativna navodi od mape u kojoj se nalazi dokument iz kojega vršimo povezivanje.

Ako u dokumentu index.html želimo prikazati sliku fb.png navođenjem apsolutne putanje, upisujemo sljedeće:

/img/logo/fb.png

No, ako koristimo relativne putanje, onda moramo voditi računa o tome gdje se nalaze dokumenti, jedan u odnosu na drugi. Ako bismo željeli u dokumentu index.html prikazati sliku fb.png upisat ćemo sljedeće (obratite pažnju da sada nema vodeće kose crte):

img/logo/fb.png

Ako bismo željeli u dokumentu index.html prikazati sliku image.jpg, to bi izgledalo ovako:

img/image.jpg

Ukoliko želimo u dokumentu contact.html prikazati sliku picture.png upisali bismo:

../img/picture.png

Dvije točke označavaju mapu iznad, što znači da adresa mora prvo izaći iz mape u kojoj se nalazi contact.html, a tek onda ući u mapu IMG.

Dakle, cijeli HTML kod za dodavanje slike picture.png unutar dokumenta contact.html bi izgledao ovako:

<img src="../img/picture.png" alt="picture" />

CSS

Kako bi naša stranica privukla posjetitelje ona mora biti vizualno privlačna, jednostavnije rečeno, lijepa. Lijepo oblikovana, skladna i funkcionalna stranica posjetiteljima daje osjećajugode i korištenje web stranice sigurno će se nastaviti, s druge strane, ako stranica na posjetitelja ostavi loš prvi dojam, male su šanse da ćemo posjetitelja zadržati i pitanje je hoće li se uopće više služiti našom stranicom.

body {
background-color:#E4E3E3
text-align:center
margin:0px
}

#right {
width:140px
height:auto
font-size:11px
padding-right:10px
}

.right {
float:right
padding: 18px 0px 5px 10px
}

Slika 14. - Primjer CSS-a

Umetanje CSS-a

Pomoću CSS-a odvajamo HTML dokument (web stranicu) od njegovog izgleda. Umetanje CSS svojstava u HTML dokument moguće je na tri načina. Ta su tri načina interno povezivanje,vanjsko povezivanje i umetanje svojstava unutar samog CSS elementa (inline).

Interno povezivanje

Započnimo s internim povezivanjem. Interno povezivanje omogućava nam umetanje CSS svojstava između početne i završne oznake <head> elementa svakog elementa.

<!DOCTYPE HTML >
<html>
<head>
<title> Ovo je moja prva web stranica </title>
<style>
<!-- Ovdje upisujemo CSS svojstva !-->
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 30%;
}
</style>
</head>

<body>
<h1> Ovo je naslov moje prve WEB stranice! </h1>
</html>

Slika 15. - Primjer ubačenog CSS stila

Ovaj način uglavnom koristimo kod umetanja CSS svojstava u samo jedan HTML dokument. Ne preporučuje se koristiti ukoliko se CSS svojstva odnose na cijelo web sjedište.

Vanjsko povezivanje

Ona svojstva koja želimo koristiti unutar cijelog web sjedišta ćemo spremiti u zasebnu .css datoteku i povezati u zaglavlju s HTML dokumentom.

U primjeru koji slijedi smo povezali vanjsku datoteku stil.css s HTML dokumentom.

<!DOCTYPE HTML >
<html>
<head>
<title> Ovo je moja prva web stranica </title>
<link rel="stylesheet" href=style.css" />
</head>

</html>

Slika 16. - Povezivanje vanjske datoteke u HTML kodu

Vanjskim povezivanje omogućeno je korištenje iste CSS datoteke u cijelom web sjedištu. Time je olakšano i pojednostavljeno održavanje web sjedišta.

Inline CSS

Inline CSS (unutar HTML elementa) „pregazit“ će svaku vrijednost u prethodna dva slučaja. Za umetanje CSS-a unutar HTML elementa koristi se atribut elementa style.

<body>
<h1> Ovo je moja prva web stranica </h1>
<p style = "text-decoration:underline"> Ovo je moja prva web stranica </p>
<h3> Ovo je moja prva web stranica </h3>
<p> Ovo je moja prva web stranica </p>
</body>

Slika 17. - Prikaz rada inline CSS stila

CSS sintaksa

Prije nego što naučimo kako koristiti selektore, spomenuti ćemo strukturu HTML dokumenta.

Slika 18. - Hijerarhijska struktura HTML dokumenta

Iz ovog hijerarhijskog stabla možemo vidjeti kako elementi imaju svoje podređene i nadređene elemente. Npr. element main je podređen elementu body, a element body je podređen elementu HTML. Korištenjem selektora možemo precizno identificirati bilo koji od elemenata stabla.

Sintaksa CSS-a se sastoji samo od tri dijela:

selektor {
svojstvo: vrijednost;
}

Selektor predstavlja određeni HTML element kojem dodjeljujemo vrijednost svojstva.

Svojstvo je točno predefinirana oznaka koja nam govori koje svojstvo elementa mijenjamo.

Vrijednost je određeni stil koji želimo dodijeliti svojstvu.

Selektori mogu imati više svojstava. Svojstvo i vrijednost odvaja se dvotočkom i nalazi se unutar vitičastih zagrada. Iza vrijednosti svakog svojstva potrebno je napisati znak točkazarez, pomoću kojega se odvajaju svojstva.

Jedno svojstvo može imati višestruke vrijednosti i one su tada odvojene su zarezom. Ukoliko vrijednost svojstva koje želimo dodati ima više od jedne riječi stavljamo dvostruke navodne znakove.

Primjerice, sljedeća vrijednost sadržavat će dva svojstva; font veličine 16px i vrste fonta odvojene zarezom. Naziv fonta "Times New Roman" sastoji se od tri riječi i mora se nalaziti unutar dvostrukih navodnih znakova.

body{
font-size: 16px;
font-family: "Times New Roman", Times, serif;
}

Slika 19. - Osnovni prikaz CSS koda

Želimo li istovremeno odrediti svojstva za više elemenata, navodimo ih jedan iza drugoga odvojenih zarezom.

Kako dodati svojstvo boje teksta za više elemenata istovremeno, u ovome slučaju zelene boje na elemente <p>, <h1> i <h2>, vidljivo je na Slici 16.

p, h1, h2{
color: green
}

Slika 20. - CSS stiliziranje HTML elemenata

Najčešći CSS selektori

Ukoliko želimo definirati svojstva samo jednog elementa, koristit ćemo selektor identifikatora. Selektor identifikatora u pravilu se odnosi na onaj HTML element koji ima vrijednost jednaku nazivu odabranog selektora.

<div id="top-bar">
<!-- Sadržaj koji želimo prikazati -->
</div>

Slika 21. - Primjer dodjeljivanja u HTML dokumentu

CSS kod koji se primjenjuje HTML element sa svojstvom id="top-bar", oznaku ID selektora prepoznat ćemo po tome što započinje znakom '#'.

#top-bar{
text-align: left;
font-size: 12px;
}

Slika 22. - Primjer ID selektora

Ako imamo više elemenata koja želimo definirati koristiti ćemo svojstvo klase.

Selektor klase dodjeljujemo na način da HTML elementu dodamo atribut class i ime vrijednosti.

<h3 class="bold">
Naslov je podebljan.
</h3>

<p class="bold">
I tekst je također podebljan.
</p>

Slika 23. - Primjer HTML koda sa svojstvom klase "podebljano"

Ovako izgleda CSS kod koji će se odnositi na one HTML elemente sa svojstvom class="bold" , a oznaku klase prepoznat ćemo po početnom znaku '.' .

.bold {
font-weight: bold;
}

Slika 24. - CSS kod za klasu "bold"

Selektor elementa

HTML elementi (tagovi) se često koriste kao selektori i služe da odredimo izgled ili ponašanje bilo kojeg elementa unutar našeg HTML koda. U CSS-u pišemo samo naziv elementa bez ikakvih znakova. Možemo ih upotrebljavati samostalno ili u kombinaciji sa drugim selektorima.

body {
background-color: pink;
}

h1 {
font-size: 80px;
font-family: "Times New Roman", cursive;
text-align: center;
}

Slika 25. - HTML elementi kao selektori

Komentar unutar CSS-a

Kako imamo opciju dodavanja komentara unutar HTML dokumenta, tako imamo i u CSS-u. Ti se komentari uglavnom koriste radi lakšeg razumijevanja pojedinih dijelova napisanoga koda. Prilikom prikazivanja web stranice preglednici će ignorirati komentare, jednako kao u HTML dokumentu.

Komentar u CSS datoteci započinjat će znakovima /*, a završavati s */.

/* Ovo je moj komentar */

Slika 26. - Komentar unutar CSS koda

Primjeri ponašanja web stranice korištenjem HTML-a i CSS-a:

Slika 26. - Prikaz osnovnog HTML koda sa jednostavnim CSS kodom u vanjskoj datoteci

Slika 27. - Prikaz gornjeg koda u internet pregledniku

Slika 28. - Prikaz osnovnog HTML koda sa jednostavnim CSS kodom u vanjskoj datoteci te prikazom klasa

Slika 29. - Prikaz gornjeg koda u internet pregledniku

Uz pomoć ovog teksta, zajedno s uputama koje ste pročitali, dobili ste samo osnovno iuvodno znanje za kreiranje vaših web stranica, no ne i iskustvo. To ovisi isključivo o vama.Započeti možete odmah posjetom sljedećih poveznica namijenjenih učenju HTML-a i CSS-a. Puno uspjeha!!

http://www.mojwebdizajn.net/skriptni-jezici/html-za-pocetnike/html-kodovi.aspx

https://www.codecademy.com/

http://www.w3schools.com/html/

http://learn.shayhowe.com/html-css/

http://www.mojwebdizajn.net/skriptni-jezici/vodic/css/uvod-u-css.aspx

Literatura

https://www.codecademy.com/

http://www.w3schools.com/html/

http://learn.shayhowe.com/html-css/

http://www.mojwebdizajn.net/skriptni-jezici/html-za-pocetnike/html-kodovi.aspx

http://www.mojwebdizajn.net/skriptni-jezici/vodic/css/uvod-u-css.aspx